
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/5/25
  Time: 13:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"
          media="all">
    <style>
        .wrap-div {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            float: left;
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>


<div class="layui-form" id="content">
    <table class="layui-table" style="table-layout:fixed">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
            <col width="180">
        </colgroup>
        <thead>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>分类</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="book" items="${sessionScope.books}"
                   varStatus="status">
            <tr>
            <td>夏洛特烦恼</td>
            <td>夏洛</td>
            <td>1</td>
            <td class="wrap-td">
                <div class="wrap-div"><p>我也特烦恼!!!!<br></p></div>
            </td>
            <td>
                <button
                        class="layui-btn layui-btn-primary layui-btn-xs detail"
                        id="info" index="${status.index}">查看
                </button>
                <button class="layui-btn layui-btn-xs borrow"
                        id="borrow" index="${status.index}">借阅
                </button>
            </td>
        </tr>
            <tr>
                <td>植发的江湖老中医价格</td>
                <td>江湖老中医</td>
                <td>2</td>
                <td class="wrap-td">
                    <div class="wrap-div">详细介绍每植一根发多少钱？</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info1" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow1" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>代码的力量</td>
                <td>明月复苏</td>
                <td>3</td>
                <td class="wrap-td">
                    <div class="wrap-div"><p>神不知鬼不觉的拔掉你的头发<br></p></div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info2" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow2" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>java从入门到入土</td>
                <td>明月复苏</td>
                <td>3</td>
                <td class="wrap-td">
                    <div class="wrap-div">无简介</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info3" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow3" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>图书馆章程</td>
                <td>明月复苏</td>
                <td>5</td>
                <td class="wrap-td">
                    <div class="wrap-div">图书馆章程</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info4" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow4" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>图书馆建设</td>
                <td>吸尘羊</td>
                <td>5</td>
                <td class="wrap-td">
                    <div class="wrap-div">图书馆建设！</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info5" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow5" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>学习如何跑路</td>
                <td>明月复苏</td>
                <td>7</td>
                <td class="wrap-td">
                    <div class="wrap-div"><p>学习如何跑路</p></div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info6" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow6" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>美好课设</td>
                <td>匿名</td>
                <td>8</td>
                <td class="wrap-td">
                    <div class="wrap-div">做梦</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info7" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow7" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>中国童话</td>
                <td>刘丽朵</td>
                <td>9</td>
                <td class="wrap-td">
                    <div class="wrap-div">这是一本给孩子的中国童话故事集。以“非教训的无意思、空灵的幻想、快活的嬉笑、纯净的诗意、悠远的生命体味”为选篇标准，从《搜神记》《太平广记》《聊斋志异》《酉阳杂俎》等近30本经典作品中，精心挑选45篇符合现代审美、适合孩子阅读的故事；故事蕴涵着丰富的想象力与趣味性；用简美的现代语言，全新讲述中国童话故事；搭配符合故事主题的原创古风插画，带孩子进入奇幻浪漫的童话世界。</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info8" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow8" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
            <tr>
                <td>人生删除事务所</td>
                <td>本多孝好</td>
                <td>7</td>
                <td class="wrap-td">
                    <div class="wrap-div">你想好死后如何处理自己的手机、电脑、社交账号了吗？「死后，你不想示人的数据由我们来删除。」——人生删除事务所</div>
                </td>
                <td>
                    <button
                            class="layui-btn layui-btn-primary layui-btn-xs detail"
                            id="info9" index="${status.index}">查看
                    </button>
                    <button class="layui-btn layui-btn-xs borrow"
                            id="borrow9" index="${status.index}">借阅
                    </button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<div id="page" style="display: flex;justify-content: center;">
</div>

<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['laypage', 'layer', 'element'], function () {
            var laypage = layui.laypage
                , layer = layui.layer, element =
                layui.element;
            var $ = layui.$;
            var count = 0, current = 1, limit = 5;

            //查看按钮的点击事件
            $(document).on('click', '#info', function () {
                //可以获取第一列的内容，也就是name的值
                var name = $(this).parents("tr").find("td").eq(0).text();
                //也可以获取属性中的值

                layer.msg(name)
            })

            $(document).on('click', '#store', function () {
                //可以获取第一列的内容，也就是name的值
                var name = $(this).parents("tr").find("td").eq(0).text();
                var bookid = $(this).attr("index");
                $.ajax({
                    type: 'POST',
                    url: "/book/store",
                    data: JSON.stringify({
                        user: ${sessionScope.id}+"",
                        book: bookid
                    }),
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        // $('#content').load(location.href + " #content");
                        //count从Servlet中得到
                        // count = data;
                        layer.msg(data)
                        if (data == '借阅成功') {
                            $('#store').text("已收藏")
                        }

                    }
                });
            })

            //借阅按钮的点击事件
            $(document).on('click', '#borrow', function () {
                //可以获取第一列的内容，也就是name的值
                var name = $(this).parents("tr").find("td").eq(0).text();
                //也可以获取属性中的值
                console.log($(this).attr("index"))
                layer.msg(name)
            })


            $('#search').click(function () {
                var keyword = $('#keyword').val();
                alert(keyword)
            });

            $(document).ready(function () {
                //进入页面先加载数据
                getContent(1, limit);
                //得到数量count后，渲染表格
                laypage.render({
                    elem: 'page',
                    count: count,
                    curr: current,
                    limits: [5, 10, 15, 20],
                    limit: limit,
                    layout: ['count', 'prev', 'page', 'next', 'limit'],
                    jump: function (obj, first) {
                        if (!first) {
                            getContent(obj.curr, obj.limit);
                            //更新当前页码和当前每页显示条数
                            current = obj.curr;
                            limit = obj.limit;
                        }
                    }
                });
            });

            function getContent(page, size) {
                $.ajax({
                    type: 'POST',
                    url: "/book/search",
                    async: false, //开启同步请求，为了保证先得到count再渲染表格
                    data: JSON.stringify({
                        pageNum: page,
                        pageSize: size
                    }),
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        $('#content').load(location.href + " #content");
                        //count从Servlet中得到
                        count = data;
                    }
                });
            }
        }
    );
</script>
</body>
</html>
